<template>
    <div>
        <table class="table">
            <tr>
                <td>房型名称</td>
                <td> <input type="text" v-model="info.houseName"></td>
            </tr>
             <tr>
                <td>房型价格</td>
                <td> <input type="text" v-model="info.price"></td>
            </tr>
            <tr>
                <td>房型大小</td>
                <td> <input type="text" v-model="info.number"></td>
            </tr>
            <tr>
                <td>房型预览图</td>
                <td> <input type="file" @change="Img">
                   <img :src="info.img" width="60" height="60" alt="" v-if="info.img!=''">
                </td>
            </tr>
            <tr>
                <td>所在地址</td>
                <td> <input type="text" v-model="info.address"></td>
            </tr>
            <tr>
                <td></td>
                <td> <input type="button" value="录入" @click="add"></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,reactive,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
const info:any=reactive({
     "houseName": "",
  "price": "",
  "number": "",
    img: "",
  "address": ""
})
const Img=(e:any)=>{
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file',obj);
    axios.post('https://localhost:7267/api/Photo/Imgs',f).then(res=>{
        if(res.data=='上传数据不为图片')
    {
        alert('上传数据不为图片');
        return;
    }
        if(res.data=='大于2M')
    {
        alert('上传大小不能超过2MB');
        return;
    }
    info.img=res.data;
    })
}
const add=()=>{
    if(info.houseName=="")
{
    alert('房型名称不为空');
    return;
}
if(info.price=="")
{
    alert('房型价格不为空');
    return;
}
if(info.number=="")
{
    alert('房型大小不为空');
    return;
}
if(info.img=="")
{
    alert('房型预览图不为空');
    return;
}
if(info.address=="")
{
    alert('所在地址不为空');
    return;
}
    axios.post('https://localhost:7267/api/Boss/TypeAdd',info).then(res=>{
            if(res.data==-1)
            {
                alert('相同房型名称不能出现多次');
                return
            }
            if(res.data>0)
            {
                alert('添加成功');
            }
            else
            {
                alert('添加失败');
                return;
            }
    })
}
</script>

<style scoped>

</style>